<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<style>
			#app{
				margin: auto;
				text-align: center;
			}
			img{
				width: 800px;
				height: 400px;
				border-radius: 18px;
				border: 0.0625rem solid gainsboro;
			}
			button{
				width:50px;
				height: 80px;
				background-color: black;
				opacity: 0.6;
				color: #FFFFFF;
				position: absolute;
				top:170px;
				outline: none;
				border: 0px;
			}
		</style>
	</head>
	<body>
		<!-- 模拟轮播图功能，页面上有一图片进行显示，
		当点击左侧元素，则图片向前切换，点击右侧元素，图片向后切换 -->
		<div id="app">
			<button @click="left()" v-show="lbutton">&lt;</button>
			<img :src="imgSrc[index]"/>
			<button style="margin-left: -50px;" @click="right()" v-show="rbutton">&gt;</button>			
		</div>	
	</body>
	<script>
	var app=new Vue({
		el:"#app",
		data:{
			// 图片路径
			imgSrc:[
				"img/11.jpg",
				"img/12.jpg",
				"img/13.jpg",
				"img/14.jpg",
				"img/15.jpg",
				"img/16.jpg",
				"img/17.jpg",
				"img/18.jpg",
				"img/19.png",
				"img/20.jpg"
				
			],
			// 显示的当前图片的下标
			index:0,
			// 左侧按钮的动态演示隐藏，默认隐藏
			lbutton:false,
			// 右侧按钮
			rbutton:true
			
		},
		methods:{
			// 点击左侧按钮的点击事件
		left:function(){
			// 显示右侧的按钮
			this.rbutton=true
			// 判断,若下标为1是,隐藏左侧按钮
			if(this.index==1){
				this.lbutton=false
			}
			// 索引递减,切换上一张图片
			this.index--
		},
		// 右侧按钮点击事件
		right:function(){
			// 显示左侧按钮
			this.lbutton=true
			console.log(this.index)
			// 判断,若当前索引为数组最大长度-2,则隐藏右侧按钮
			if(this.index==this.imgSrc.length-2){
				this.rbutton=false
			}
			// 索引递增,显示下一张图片
			this.index++
		}
			
		}
	})
	</script>
</html>
